<template>
  <el-dialog
    v-model="showPosts"
    title="选择贴文"
    :fullscreen="rel.fullscreen"
    :width="rel.width"
    :before-close="handleClose"
    top="5vh"
    class="posts"
  >
    <el-tabs v-model="rel.post_platform" @tab-change="tabChange">
      <el-tab-pane
        v-for="item in rel.post_platform_arr"
        :label="item.name"
        :name="item.id"
      >
      </el-tab-pane>
    </el-tabs>
    <template v-if="rel.post_platform == 'fb'">
      <el-alert :title="rel.fans" type="warning" :closable="false" />
      <el-space class="mt-1" wrap :size="10">
        <el-select
          v-model="params.post_type"
          placeholder="Feed"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in rel.post_type_arr"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-input
          v-model="params.fb_url"
          style="width: 250px"
          placeholder="url"
        />
        <el-button :icon="Search" plain @click="search">查詢</el-button>
      </el-space>
      <el-scrollbar class="scroll">
        <el-radio-group v-model="rel.select_post_id">
          <div
            class="font"
            style="width: 100%"
            v-for="(item, index) in tableData"
          >
            <div class="flex border rounded-sm p-15 my-1">
              <el-radio class="hide-label" value="item.post_id"></el-radio>
              <div>
                <div>贴文ID:{{ item.post_id }}</div>
                <div class="flex mb-1">
                  <span class="font text-tips-color mr">{{
                    item.post_time
                  }}</span>
                  <el-link :href="item.fb_url" type="primary" target="_blank"
                    >查看原文</el-link
                  >
                  <span v-if="item.fb_url.includes('videos')" class="live"
                    >LIVE</span
                  >
                </div>
                <div>{{ item.post_content }}</div>
              </div>
            </div>
          </div>
        </el-radio-group>
        <div class="mt-2 flex flex-wrap justify-center">
          <el-pagination
            v-model:current-page="params.current_page"
            v-model:page-size="params.page_size"
            :small="false"
            :disabled="false"
            :background="true"
            :pager-count="rel.pagerCount"
            layout="prev, pager, next"
            :total="Number(rel.total)"
            class="mb-1"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-scrollbar>
    </template>
    <template v-if="rel.post_platform == 'ig'">
      <el-scrollbar class="scroll"> IG </el-scrollbar>
    </template>
    <!-- <template v-if="rel.post_platform == 'fbgroup'">
      <el-scrollbar class="scroll">
        <el-alert :title="rel.fans" type="warning" :closable="false" />
        <el-form
          ref="groupFormRef"
          :model="groupForm"
          :rules="rules"
          label-width="auto"
          class="mt-3 group-form"
          status-icon
        >
          <el-form-item label="POST URL" prop="post_url">
            <el-input v-model="groupForm.post_url" />
          </el-form-item>
          <el-form-item label="VIDEO URL" prop="video_url">
            <el-input v-model="groupForm.video_url" />
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </template> -->
    <template v-if="rel.post_platform == 'tiktok'">
      <el-scrollbar class="scroll">
         <el-radio-group v-model="rel.checked_tiktok">
        <el-radio value="tiktok">Tiktok</el-radio>
        </el-radio-group>
      </el-scrollbar>
    </template>
    <el-dialog v-model="rel.innerVisible" width="300" append-to-body>
      <span>贴文不能为空</span>
    </el-dialog>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">Cancel</el-button>
        <el-button type="primary" @click="sendPost"> Confirm </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, computed } from "vue";
import { $getPosting, $getPostingType, $getPostingPlatform } from "@api/live";
import { Search, Setting, Plus } from "@element-plus/icons-vue";
import { useCommonStore } from "@/store/common";
import { useLocaleStore } from "@/store/locales";
const useLocale = useLocaleStore();
const useCommon = useCommonStore();
const showPosts = computed(() => useCommon.showPosts);

const params = ref({
  post_type: "",
  fb_url: "",
  post_content: "",
  current_page: 1,
  page_size: 10,
});
const rel = reactive({
  fans: "",
  total: 0,
  checked_tiktok: 'tiktok',
  select_post_id: "",
  type_arr: [],
  post_platform: "",
  post_platform_arr: [],
  post_type_arr: [],
  width: "60%",
  fullscreen: false,
  pagerCount: 7,
  innerVisible: false,
});
// const groupForm=reactive({
//   post_url: "",
//   video_url: "",
// })
// const validatePostUrl= (rule: any, value: any, callback: any) => {
//   if (value === '') {
//     callback(new Error('不能为空'))
//   } else if (!value.includes('https://www.facebook.com/groups')) {
//     callback(new Error("请输入正确地址，例:https://www.facebook.com/groups/xxxxx"))
//   } else {
//     callback()
//   }
// }
// const validateVideoUrl= (rule: any, value: any, callback: any) => {
// if (value === '') {
//     callback()
//   }
// else if (!value.includes('https://www.facebook.com/videos')) {
//     callback(new Error("请输入正确地址，例:https://www.facebook.com/videos/xxxxx"))
//   } else {
//     callback()
//   }
// }
// const rules = reactive({
//     post_url: [{ validator: validatePostUrl,required: true, trigger: 'blur' }],
//     video_url: [{ validator: validateVideoUrl, trigger: 'blur' }],
// })
const scrollbarRef = ref();
const tableData = ref([]);
onMounted(() => {
  getFilter();
  if (useLocale.isMob) {
    rel.fullscreen = true;
    rel.pagerCount = 5;
  } else {
    rel.fullscreen = false;
    rel.pagerCount = 7;
  }
});
const getFilter = async () => {
  const platform_res = await $getPostingPlatform();
  const type_res = await $getPostingType();
  rel.post_platform_arr = platform_res.data.list;
  rel.post_type_arr = type_res.data.list;
  rel.post_platform = platform_res.data.list[0].id;
  params.value.post_type = type_res.data.list[0].id;
  getData();
};

const tabChange = (name) => {
  console.log(rel.post_platform);

  //getData();
};
const getData = async () => {
  let res = await $getPosting(params.value);
  console.log(res);
  if (res.code == 0) {
    tableData.value = res.data.table;
    rel.total = res.data.total;
    rel.fans = `粉丝专页：${res.data.fan_pages}`;
  }
};
const handleClose = (done: () => void) => {
  useCommon.setShowPosts(false);
  done();
};

const handleCancel = () => {
  useCommon.setShowPosts(false);
};
const handleSizeChange = (val: number) => {
  params.value.page_size = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  params.value.current_page = val;
  getData();
  console.log(`current page: ${val}`);
};
const emit = defineEmits(["sendData"]);
const sendPost = () => {
  let opts = {
    post_platform: rel.post_platform,
    post: {},
  };
  if (rel.post_platform == "fb" && tableData.value.length > 0) {
    let p_index = tableData.value.findIndex(
      (e) => e.post_id == rel.select_post_id
    );
    opts.post = tableData.value[p_index];
  }
  if (rel.post_platform == "tiktok") {
    let t_index = rel.post_platform_arr.findIndex((e) => e.id == "tiktok");

    opts.post = rel.post_platform_arr[t_index];
  }
  if (JSON.stringify(opts.post) == "{}"||!opts.post) {
    rel.innerVisible = true;
  }else{
     useCommon.setShowPosts(false);
     emit("sendData", opts);
  }

};
const search = () => {
  console.log(params.value);
  getData();
};
</script>
<style>
.posts .el-dialog__body {
  padding: 0 20px 20px 20px;
}
.posts .el-radio {
  margin-right: 15px;
}
.posts .hide-label .el-radio__label {
  display: none;
}
.posts .el-form-item {
  margin-bottom: 35px;
}
</style>
<style lang="scss" scoped>
.posts {
  .live {
    margin-left: 5px;
    border-radius: 3px;
    background: #dd3f4f;
    color: #fff;
    font-size: 10px;
    height: 18px;
    line-height: 18px;
    font-weight: 500;
    padding: 0 5px;
  }
}
.tab {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.scroll {
  height: calc(100vh - 400px);
}
</style>
